<template>
  <div ref="echarts" style="width: 100%;height: 100%;">
  </div>
</template>
<script>

  import * as echarts from "echarts";

  export default {
    data() {
      return {
        option : {},
        myEcharts:null
      }
    },
    created: function () {

    },
    mounted() {
      this.myEcharts = echarts.init(this.$refs.echarts);
    },

    methods: {
      updateEcharts(config) {
        const options = this.getOptions(config)
        this.myEcharts.setOption(options);
      },

      viewportToPixels(value) {
        var parts = value.match(/([0-9\\.]+)(vh|vw)/)
        var q = Number(parts[1])
        var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]]
        return side * (q/100)
      },
      getOptions(config){

        const titleFontSize = this.viewportToPixels('1.8vh').toFixed(2)
        const legendFontSize = this.viewportToPixels('1.4vh').toFixed(2)
        const labelFontSize = this.viewportToPixels('1.2vh').toFixed(2)

        const legendItemWidth = this.viewportToPixels('1.2vw')
        const legendItemHeight = this.viewportToPixels('0.8vw')

        return {
          color: config.color,
          width: '100%',
          height: '100%',
          // backgroundColor: '#2B80D3',
          title: Object.assign({
            textStyle:{
              fontSize:titleFontSize,
              fontFamily:'Noto Sans SC',
              fontWeight:'normal',
              color:'white',
            }
          },config.title),

          tooltip: {
            trigger: 'item'
          },

          legend: {
            orient: 'vertical',
            left: 'left',
            itemWidth:legendItemWidth,
            itemHeight:legendItemHeight,
            textStyle:{
              fontSize:legendFontSize,
              fontFamily:'Noto Sans SC',
              color:'white',
            },
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '60%',
              data: config.data,
              center:['50%','58%'],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                smooth: 0.2,
                length: 12,
                length2: 14
              },
              label:{
                fontSize:labelFontSize,
                fontFamily:'Noto Sans SC',
                color:'white',
              }
            }
          ]
        }
      }

    }
  }

</script>

<style>



</style>
